<template>
  <FormItem label="默认值">
    <RadioGroup v-bind="activeComp.__component__" v-model:value="activeComp.defaultValue" />
  </FormItem>
  <FormItem label="是否禁用">
    <Switch v-model:checked="activeComp.__component__.disabled" />
  </FormItem>
  <Divider>数据选项</Divider>
  <RadioGroup
    class="!flex justify-center !mb-4"
    v-model:value="activeComp.__data__.type"
    button-style="solid"
  >
    <RadioButton value="static">静态数据</RadioButton>
    <RadioButton value="api">远程数据</RadioButton>
  </RadioGroup>
  <template v-if="activeComp.__data__.type === 'static'">
    <Draggable
      v-model="activeComp.__component__.options"
      item-key="index"
      :animation="200"
      handle=".mover"
    >
      <template #item="{ element, index }">
        <div class="mb-2">
          <Row :gutter="6" class="flex items-center">
            <Col :span="2" class="mover cursor-move">
              <Icon icon="ant-design:drag-outlined" />
            </Col>
            <Col :span="9">
              <Input v-model:value="element.label" placeholder="选项名" />
            </Col>
            <Col :span="9">
              <Input v-model:value="element.value" placeholder="选项值" />
            </Col>
            <Col :span="2">
              <Popover>
                <template #content>
                  <span>禁选</span>
                </template>
                <Checkbox v-model:checked="element.disabled" />
              </Popover>
            </Col>
            <Col :span="2" class="cursor-pointer" @click="delOption(index)">
              <Icon icon="ant-design:minus-circle-outlined" size="24" color="#f56c6c" />
            </Col>
          </Row>
        </div>
      </template>
    </Draggable>
    <Button type="link" @click="addOptions">
      <template #icon>
        <Icon icon="ant-design:plus-circle-outlined" />
      </template>
      添加选项
    </Button>
  </template>
  <template v-if="activeComp.__data__.type === 'api'">
    <div> 未接入远程功能 </div>
  </template>
  <Divider />
  <FormItem label="选项样式">
    <RadioGroup v-model:value="activeComp.__component__.optionType" button-style="solid">
      <RadioButton value="default">默认</RadioButton>
      <RadioButton value="button">按钮</RadioButton>
    </RadioGroup>
  </FormItem>
  <FormItem label="选项样式">
    <RadioGroup v-model:value="activeComp.__component__.buttonStyle" button-style="solid">
      <RadioButton value="outline">边框</RadioButton>
      <RadioButton value="solid">实底</RadioButton>
    </RadioGroup>
  </FormItem>
</template>
<script lang="tsx" setup name="RadioOption">
  import { toRefs } from 'vue';
  import Draggable from 'vuedraggable-es';
  import {
    FormItem,
    Switch,
    Divider,
    Radio,
    Input,
    Checkbox,
    Row,
    Col,
    Button,
    Popover,
  } from 'ant-design-vue';
  import { useFormStore } from '/@/store/modules/workFlow/form';
  import { Icon } from '/@/components/Icon';
  const RadioGroup = Radio.Group;
  const RadioButton = Radio.Button;
  const store = useFormStore();

  const { activeComp } = toRefs<any>(store);

  /**
   * 添加选项
   */
  const addOptions = () => {
    activeComp.value.__component__.options.push({
      label: '',
      value: '',
      disabled: false,
    });
  };
  /**
   * 删除选项
   */
  const delOption = (index) => {
    activeComp.value.__component__.options.splice(index, 1);
  };
</script>
<style lang="less" scoped></style>
